<template>
  <div class="container" style="padding-top: 20px">
    <div class="main">
      <div class="main_list" v-loading="loading">
        <div class="main_video"  v-for="item in videoList" :key="item.id">
          <a
            href="https://www.dance365.com/discovery/special_zone?zoneId=ff80808176f5683b0176f9ae53656bd9&filter=%255B%257B%2522filterCode%2522%253A%2522subject%2522%252C%2522filterValue%2522%253A%255B%2522all%2522%255D%257D%255D&showAllSign=0&selectOrder=integrated"
            ><img
              style="
                margin-bottom: 20px;
                width: 286px;
                height: 156px;
                border-radius: 4px;
              "
              :src="item.cover"
              alt=""
          /></a>
        </div>
        <!-- <div class="main_video">
                <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
            </div>
            <div class="main_video">
                <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
            </div>
            <div class="main_video">
                <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
            </div>
            <div class="main_video">
                <img style="width:286px;height:156px; border-radius: 4px;" src="https://rs.dance365.com/photo/1610527923148.png" alt="">
            </div> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import courseApi from "@/api/course";
import { onMounted, ref } from "vue";
</script>
<script lang="ts" setup>
const loading = ref<boolean>(false);
const pageSize = ref(16);
const videoList = ref<any>([]);
onMounted(() => {
  getVideoList();
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});
const getVideoList = async () => {
  const res = await courseApi.getMainTitle(pageSize.value);
  videoList.value = res.content;
  console.log(res.content);
};
</script>

<style scoped>
.container {
  background-color: #f5f7f9 !important;
}
.main {
  width: 1200px;
  height: auto;
  display: flex;
  margin: 0 auto;
  /* flex: 1; */
}
.main_list {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  width: 100%;
  /* background-color: aqua; */
}
.main_video {
  margin: auto 7px;
}
</style>
